import { AbstractDraw } from './AbstractDraw'

export class DrawGrid extends AbstractDraw {
  constructor(ctx: CanvasRenderingContext2D, startY: number, private endY: number, private endX: number) {
    super(ctx, startY)
  }

  /**
   * 绘制网格
   */
  public draw() {
    const step = 20
    const start = 0
    // 绘制横向的直线
    let y = 0
    while (y <= this.endY - this.startY) {
      if (y === 0 || y === this.endY - this.startY) {
        super.drawline(this.scaleXY(start, y), this.scaleXY(this.endX, y), 0.5, 'black')
      } else {
        super.drawline(this.scaleXY(start, y), this.scaleXY(this.endX, y), 0.2, '#7f8c8d')
      }
      y += step
    }

    // 绘制竖向的直线
    let x = start
    while (x <= this.endX) {
      if (x === 0 || x === this.endX) {
        super.drawline(this.scaleXY(x, start), this.scaleXY(x, this.endY - this.startY), 0.5, 'black')
      } else {
        super.drawline(this.scaleXY(x, start), this.scaleXY(x, this.endY - this.startY), 0.2, '#7f8c8d')
      }
      x += step
    }

    // 绘制横向的数字
    // x = start
    // while (x <= this.endX) {
    //   const txt = x.toString()
    //   super.drawText(txt, this.scaleXY(x, -15), '#000')
    //   super.drawline(this.scaleXY(x, -3), this.scaleXY(x, 3), 3, '#000')

    //   const i = this.endY - this.startY
    //   super.drawText(txt, this.scaleXY(x, i + 15), '#000')
    //   super.drawline(this.scaleXY(x, i - 3), this.scaleXY(x, i + 3), 3, '#000')

    //   x += step * 2
    // }

    // 绘制纵向的数字
    y = start
    let txt = this.startY
    while (txt <= this.endY) {
      super.drawText((txt / 2).toString(), this.scaleXY(-15, y), '#000')
      super.drawline(this.scaleXY(-3, y), this.scaleXY(3, y), 3, '#000')

      super.drawText((txt / 2).toString(), this.scaleXY(this.endX + 15, y), '#000')
      super.drawline(this.scaleXY(this.endX - 3, y), this.scaleXY(this.endX + 3, y), 3, '#000')

      y += step * 2
      txt += step * 2
    }
  }

  protected scaleXY(x: number, y: number): [number, number] {
    return [x, -y]
  }
}
